<template>
  <div class="login-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="登录">
      <!-- 插槽自定义左侧内容 -->
      <template #left>
        <img src="@/assets/image/logo.png" class="logo" />
      </template>
    </van-nav-bar>
    <!-- 表单组件 -->
    <!--
      @submit事件:
        表单的提交事件，如果每个表单项添加了rules检验规则
        那么只有在所有的表单项都校验成功了，才会触发submit事件
     -->
    <van-form @submit="handleLogin">
      <!--
        label：左侧的文本
        placeholder: 提示文案占位符
        rules: 校验规则
          required: 必填项
          pattern: 正则规则
          message: 错误提示消息

        v-model: 收集输入框的值
          小技巧：因为表单的值需要提交后给后台，所以建议取名的时候与后台接口参数名保持一致
       -->

      <van-field
        v-model="loginForm.mobile"
        label="手机号"
        placeholder="手机号"
        :rules="[
        { required: true, message: '请填写手机号' },
        { pattern: /^1[3-9]\d{9}$/, message: '请填写正确的手机号' }
        ]"
      />
      <van-field
        v-model="loginForm.code"
        label="验证码"
        placeholder="验证码"
        :rules="[
          { required: true, message: '请填写验证码' },
          { pattern: /^\d{6}$/, message: '请填写正确的验证码' }
        ]" />
      <div style="margin: 16px;">
        <!--
          round: 圆角
          block: 块级元素
          type: 按钮的外观
          native-type: 原生的按钮的类型，submit可以提交表单
         -->
        <van-button
          round
          block
          type="info"
          native-type="submit"
          :loading="loading"
          loading-text="登录中..."
          >
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>

// 登录功能的实现流程：
// 1. 建页面配路由
// 2. 静态布局+样式（画界面）
// 3. 收集表单数据
// 4. 校验
// 5. 提交请求
// 6. vuex+本地存储共同管理token
// 7. 细节优化(请求成功与失败的捕获，防止登录按钮重复点击...)

export default {
  name: 'LoginView',
  data () {
    return {
      // 登录表单
      loginForm: {
        mobile: '13911119999', // 手机号
        code: '246810'// 验证码
      },
      // 控制登录按钮的加载状态
      loading: false
    }
  },
  methods: {
    // 登录
    async handleLogin () {
      // try-catch-finally:
      //  js中捕获错误的语法，
      //  常用于ajax请求，用来捕获await的异常
      // try {
      //  把可能出错的代码放在try中
      //  如果try中代码没有错误，则正常执行try中后续代码
      //  如果try中代码有错，则停止try中的后续代码
      //  转而去执行catch中代码
      // } catch (err) {
      //  对错误做出处理
      //  err: 此次错误对象，记录了错误原因
      // } finally {
      //  不管try中代码有错没错，这里代码始终都会执行
      // }
      // 提交登录请求前开启按钮的加载状态
      this.loading = true
      try {
        // 调用action函数、传参
        await this.$store.dispatch('user/loginAction', this.loginForm)
        // 登录成功的提示
        this.$toast.success('登录成功')
        // 跳转至首页
        this.$router.replace(this.$route.query.redirectUrl || '/')

        // $route vs $router

        // $router.push(): 路由跳转，可以回退
        // $router.replace(): 路由跳转，不可以回退
        // $router.back(): 后退一步
        // $router.forward(): 前进一步
        // $router.go(): 既可以前进也可以后退
        //   前进一步：$router.go(1)
        //   后退一步：$router.go(-1)
        //   前进三步：$router.go(3)
        //   后退三步：$router.go(-3)
      } catch (err) {
        // 登录失败的提示
        this.$toast.fail('登录失败')
      } finally {
        // 登录请求结束关闭按钮的加载状态
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang="less">
  .logo {
    width: 110px;
    height: 33px;
  }
</style>
